TypeScript 的使用|Graphql专题 | 前端进阶之旅

# 编写第一个 TypeScript 程序

我们在这个编辑工具中输入以下代码：

function greeter(person) {
    return `Hello, ${person}`;
}

@前端进阶之旅: 代码已经复制到剪贴板

我们可以看到编辑器给了我们一段警告，这段警告翻译成中文的意思就是：对于隐式含有 any 类型的参数或者变量进行警告⚠️这是因为TypeScript 默认开启了严格模式

规则如下

规则名称	解释
noImplicitAny	不允许变量或函数参数具有隐式 any 类型
noImplicitThis	不允许 this 上下文隐式定义
strictNullChecks	不允许出现 null 或 undefined 的可能性
strictPropertyInitialization	验证构造函数内部初始化前后已定义的属性
strictBindCallApply	对 bind、call、apply 更严格的类型检测
strictFunctionTypes	对函数参数进行严格逆变比较

而我们正是触犯了 noImplicitAny 这条规则，我们对上边那段代码进行如下修改：

function greeter(person: string) {
    return `Hello, ${person}`;
}

@前端进阶之旅: 代码已经复制到剪贴板

可以看到这个警告已经消失了，并且看到 greeter 的返回值自动推导为 string 类型。之所以一开始就开启严格模式，主要目的有以下几点：

消除 JavaScript 中的一些不合理、不严谨的之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度

# 数据类型

TypeScript 的数据类型有很多，有一些相信大家已经熟练掌握了。我就不一一为大家介绍了，主要为大家介绍一下以下几种：

# 元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。看下方示例

// 声明一个元组类型
const info: [string, number] = ['Jack', 20]; // OK

// 如果你的数组没有满足元组要求
const info: [string, number] = [20, 'Jack']; // Error
// Type 'number' is not assignable to type 'string'.
// 这个错误是因为不能将数字类型分配给字符串类型

const info: [string, number] = ['Jack']; // Error
// Property '1' is missing in type '[string]' but required in type '[string, number]'.
// 这个错误大概意思就是缺少一个属性，但在元组中设定是必须的

@前端进阶之旅: 代码已经复制到剪贴板

由此我们可以看出顺序不可以颠倒，长度不可以违规，是固定的。

# 枚举

enum类型是对 JavaScript 标准数据类型的一个补充。像 C# 等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

# 数字枚举

我们先来看一下数字枚举：

enum Direction {
	Top,   // 我们可以初始化，比如 Top = 1
    Bottom,
    Left,
    Right
}

@前